<template>
    <div>
        <Row type="flex" justify="center" class="code-row-bg">
            <!--左侧-->
            <ICol span="16">
                <div style="background: white">
                    <!--路由-->
                    <h3 style="text-align: left;padding-top: 1%" @click="$router.back()">
                        <a style="margin-left: 1%">
                            <Icon type="ios-arrow-back"/>
                            <span>返回</span>
                        </a>
                    </h3>
                    <!--标题部分-->
                    <h1 style="text-align: center">{{article.atitle}}</h1>
                    <!--文章信息-->
                    <div style="display: flex;justify-content: center;margin-top: 2%;color: #888888;border-bottom: 1px solid #888888;padding-bottom: 2%">
                        <span>发布时间：{{article.aCreatetime}}</span>
                        <span style="margin-left: 5%;margin-right: 5%">浏览量：<span style="color: red">{{article.avisitcount}}</span></span>
                        <span>作者：<span style="color: red">{{article.user.unickname}}</span></span>
                    </div>
                    <!--markdown编辑器-->
                    <div>
                        <mavon-editor v-model="article.acontent" :subfield="false"
                                      defaultOpen="preview" :boxShadow="false"
                                      :editable="false" :toolbarsFlag="false">
                        </mavon-editor>
                    </div>
                    <!--点赞和打赏-->
                    <div class="thumbs_content">
                        <a v-if="!love" class="thumbs_button fa fa-thumbs-up" @click="setLove">
                            <Icon type="md-heart" color="red"/>
                            喜欢({{article.alikecount}})</a>
                        <a style="color: deepskyblue" v-else class="thumbs_button fa fa-thumbs-up" @click="setLove">
                            <Icon type="md-heart" color="red"/>
                            不喜欢了({{article.alikecount}})</a>
                        <a class="reward_button fa fa-money" @mouseenter="showPay=true" @mouseleave="showPay=false">
                            <Icon type="logo-usd"/>
                            打赏</a>
                        <div v-show="showPay" style="display: flex;position:absolute;margin-left: 36%;z-index: 2">
                            <img style="height: 200px" src="../assets/images/zfbpay.jpg" alt="">
                            <img style="height: 190px" src="../assets/images/wxpay.jpg" alt="">
                        </div>
                    </div>
                </div>
                <!--评论-->
                <div style="margin-top:10%;background: white;z-index: 1">
                    <h3 style="border-left: 4px solid deepskyblue;padding-left: 1%">博客评论</h3>
                    <!--发表评论-->
                    <div style="display: flex;justify-content: center">
                        <Input v-model="commentVo.comContent" maxlength="250" show-word-limit type="textarea"
                               placeholder="你对这篇文章怎么看..." style="width: 100%;margin-top: 1%;border-radius: 4%"
                               :rows="5"/>
                    </div>
                    <div style="text-align: right">
                        <Button type="info" style="width: 80px" @click="publishComment">发布</Button>
                    </div>
                    <!--评论列表-->
                    <div style="border-top: 1px solid #888888;margin-top: 2%">
                        <div v-if="commentList===null||commentList.length<1">
                            <h3 style="text-align: center;margin-top: 1%">无评论</h3>
                        </div>
                        <div v-else>
                            <!--父评论-->
                            <div v-for="(com,index) in commentList" :key="index"
                                 style="border-bottom: 1px solid #888888">
                                <div style="display: flex;margin-top: 2%;margin-left: 1%;padding-bottom: 2%;">
                                    <!--头像-->
                                    <div style="width: 6%">
                                        <Avatar shape="square" size="large" :src="com.blogUser.uheadpicture"/>
                                    </div>
                                    <!--右侧-->
                                    <div style="width: 94%;margin-top: 2px">
                                        <!--上-->
                                        <div style="display: flex;justify-content: space-between">
                                            <div style="font-weight: bolder;color: red;font-size: 15px">
                                                <span>{{com.blogUser.unickname}}</span>
                                            </div>
                                            <div style="margin-right: 2%">{{com.comComtime}}</div>
                                        </div>
                                        <!--下-->
                                        <div style="display: flex;justify-content: space-between">
                                            <span style="margin-left: 1%;width: 80%;margin-top: 1%;margin-bottom: 1%">{{com.comContent}}</span>
                                            <div style="width: 20%;margin-top: 1%;text-align: right;margin-right: 2%">
                                                <a style="margin-right: 20px" @click="setGood(com)">
                                                    <Icon v-if="!loveVisable.get(com.comId)" type="ios-heart"/>
                                                    <Icon v-else type="ios-heart" color="red"/>
                                                    <span style="margin-left: 2px">{{com.comLikecount}}</span>
                                                </a>
                                                <a style="color: #888888" @click="appendComment(com.comId)">
                                                    <Icon type="ios-redo"/>
                                                    回复</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div v-show="backVisable.get(com.comId)" style="margin-bottom: 2%">
                                    <!--发表评论-->
                                    <div style="width: 100%;text-align: right">
                                        <Input v-model="BackContent" maxlength="250"
                                               show-word-limit type="textarea"
                                               placeholder="大人！我有话要说！"
                                               style="width: 80%;margin-top: 1%;border-radius: 4%"
                                               :rows="5"/>
                                    </div>
                                    <div style="text-align: right">
                                        <Button type="info" style="width: 80px"
                                                @click="backComment(com.comId,com.blogUser.uid)">
                                            发布
                                        </Button>
                                    </div>
                                </div>
                                <!--子评论-->
                                <div v-for="(item,index2) in com.blogComments" :key="index2">
                                    <div style="width: 90%;display: flex;margin-left: 10%;padding-top:1%;padding-left:1%;padding-bottom:1%;border-top: 1px solid #888888;">
                                        <!--头像-->
                                        <div style="width: 6%">
                                            <Avatar shape="square" size="large" :src="item.blogUser.uheadpicture"/>
                                        </div>
                                        <!--右侧-->
                                        <div style="width: 94%;margin-top: 2px;margin-left: 1%;">
                                            <!--上-->
                                            <div style="display: flex;justify-content: space-between">
                                                <div style="width: 40%">
                                                    <span style="font-size: 15px;font-weight: bolder;">{{item.blogUser.unickname}}</span>
                                                    <span style="color: #888888;margin-left: 3%">回复：</span>
                                                    <span style="font-size: 15px;font-weight: bolder;">{{item.targetUser.unickname}}</span>
                                                </div>
                                                <div style="margin-right: 2%">{{item.comComtime}}</div>
                                            </div>
                                            <!--下-->
                                            <div style="display: flex;justify-content: space-between">
                                                <span style="margin-left: 1%;width: 80%;margin-top: 1%;margin-bottom: 1%">{{item.comContent}}</span>
                                                <div style="width: 20%;margin-top: 1%;text-align: right;margin-right: 2%">
                                                    <a style="margin-right: 20px" @click="setGood(item)">
                                                        <Icon v-if="!loveVisable.get(item.comId)" type="ios-heart"/>
                                                        <Icon v-else type="ios-heart" color="red"/>
                                                        <span style="margin-left: 2px">{{item.comLikecount}}</span>
                                                    </a>
                                                    <a style="color: #888888"
                                                       @click="appendComment(item.comId)">
                                                        <Icon type="ios-redo"/>
                                                        回复</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-show="backVisable.get(item.comId)" style="margin-bottom: 2%">
                                        <!--发表评论-->
                                        <div style="width: 100%;text-align: right">
                                            <Input v-model="BackContent" maxlength="250"
                                                   show-word-limit type="textarea"
                                                   placeholder="大人！我有话要说！"
                                                   style="width: 80%;margin-top: 1%;border-radius: 4%"
                                                   :rows="5"/>
                                        </div>
                                        <div style="text-align: right">
                                            <Button type="info" style="width: 80px"
                                                    @click="backComment(com.comId,item.blogUser.uid)">
                                                发布
                                            </Button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </ICol>
            <!--右侧-->
            <ICol span="6" style="margin-left: 2%">
                <Sider/>
            </ICol>
        </Row>
    </div>
</template>

<script>
  import Sider from '../components/sider/Sider'

  export default {
    data () {
      return {
        love: false,
        loveVisable: new Map(),
        backVisable: new Map(),
        showPay: false,
        article: {
          user: {
            unickname: ''
          }
        },
        commentList: [],
        // 评论参数
        commentVo: {
          articleId: 0,
          comContent: ''
        },
        BackContent: ''
      }
    },
    components: {
      Sider
    },
    mounted () {
      // 切换页面时滚动条自动滚动到顶部
      window.scrollTo(0, 0)
      // 获取文章
      this.getArticleBlog()
    },
    methods: {
      getArticleBlog () {
        this.$http.get(`article/${this.$route.params.id}`).then(res => {
          res = res.data
          if (res.code === 0) {
            this.article = res.data
            // 获取这篇文章的评论
            this.getComment()
          } else {
            this.$Message.error(res.msg)
          }
        })
      },
      // 点赞
      setLove () {
        this.love = !this.love
        if (this.love) {
          this.article.alikecount++
        } else {
          this.article.alikecount--
        }
        // 点赞
        this.$http.put(`article-like?id=${this.article.aid}&like=${this.love}`).then(res => {
          res = res.data
          if (res.code !== 0) {
            this.$Message.error(res.msg)
          }
        })
      },
      // 获取评论
      getComment () {
        this.$http.get(`comments?articleId=${this.article.aid}`).then(res => {
          res = res.data
          if (res.code === 0) {
            this.commentList = res.data
          } else {
            this.$Message.error(res.msg)
          }
        })
      },
      // 发表评论
      publishComment () {
        if (this.commentVo.comContent === null || this.commentVo.comContent === '') {
          this.$Message.info('评论内容不能为空')
          return
        }
        // 检验是否登录
        if (!window.localStorage.getItem('lhamster_identity_info')) {
          this.$store.dispatch('showLogin')
          this.$Message.info('请登录后再操作')
          return
        }
        // 设置文章id
        this.commentVo.articleId = this.article.aid
        // 发布评论
        this.$http.post('comment', new URLSearchParams(this.commentVo)).then(res => {
          res = res.data
          if (res.code === 5110) {
            // 重置内容
            this.commentVo.articleId = 0
            this.commentVo.comContent = ''
            // 提示用户成功
            this.$Message.success(res.msg)
            // 重新查询评论
            this.getComment()
          } else {
            this.$Message.error(res.msg)
          }
        })
      },
      // 设置点赞
      setGood (row) {
        this.loveVisable.set(row.comId, !this.loveVisable.get(row.comId))
        var params = new URLSearchParams()
        params.append('comId', row.comId)
        params.append('status', this.loveVisable.get(row.comId))
        this.$http.put('comments', params).then(res => {
          res = res.data
          if (res.code === 0) {
            // 标记归零
            this.getComment()
          } else {
            this.$Message.error(res.msg)
          }
        })
      },
      // 回复评论框出现
      appendComment (id) {
        this.backVisable.clear()
        this.backVisable.set(id, true)
        this.getComment()
      },
      // 回复评论
      backComment (parentId, targetId) {
        if (this.BackContent === null || this.BackContent === '') {
          this.$Message.info('评论内容不能为空')
          return
        }
        // 检验是否登录
        if (!window.localStorage.getItem('lhamster_identity_info')) {
          this.$store.dispatch('showLogin')
          this.$Message.info('请登录后再操作')
          return
        }
        var params = new URLSearchParams()
        // 对二级评论的评论
        params.append('parentId', parentId)
        params.append('targetId', targetId)
        params.append('comContent', this.BackContent)
        // 回复评论
        this.$http.post('comment', params).then(res => {
          res = res.data
          if (res.code === 5110) {
            // 清空回复框
            this.backVisable.clear()
            this.BackContent = ''
            this.getComment()
            this.$Notice.success({ title: res.msg })
          } else {
            this.$Notice.error({ title: res.msg })
          }
        })
      }
    }
  }
</script>

<style scoped>
    .thumbs_content {
        width: 291px;
        margin: 0 auto;
    }

    .thumbs_button {
        float: left;
        width: 145px;
        text-align: center;
        margin: 5px auto;
        height: 45px;
        line-height: 45px;
        background-color: #444;
        color: #fbfbfb;
        text-align: center;
        text-decoration: none;
        font-weight: bold;
        font-size: 16px;
        transition: all 0.3s;
        border-radius: 0 0 0 25px;
        -webkit-border-radius: 0 0 0 25px;
        -moz-border-radius: 0 0 0 25px;
        -o-border-radius: 0 0 0 25px;
    }

    .reward_button {
        float: left;
        width: 145px;
        text-align: center;
        margin: 5px auto;
        height: 45px;
        line-height: 45px;
        background-color: #cd4450;
        color: #fbfbfb;
        text-align: center;
        text-decoration: none;
        font-weight: bold;
        font-size: 16px;
        border-left: 1px solid #fbfbfb;
        transition: all 0.3s;
        border-radius: 0 25px 0 0;
        -webkit-border-radius: 0 25px 0 0;
        -moz-border-radius: 0 25px 0 0;
        -o-border-radius: 0 25px 0 0;
    }

    .thumbs_button:hover, .reward_button:hover {
        opacity: 0.8;
        font-size: 18px;
    }

    .clear {
        clear: both;
    }
</style>
